<title>修改房源</title>
@extends('admin.common.main')
<!-- webupload上传样式 -->
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
@section('html')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 房源管理
        <span class="c-gray en">&gt;</span> 修改房源
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{-- 表单验证提示 --}}
        @include('admin.common.validate')
        <form action="{{ route('admin.fang.update',$id) }}" method="post" id="fang-add"  class="form form-horizontal">
            @method('PUT')
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="fang_name" value="{{ $fang_name }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="fang_xiaoqu" value="{{ $fang_xiaoqu }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区地址：</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <select name="fang_province" style="width:70px;" onchange="selectCity(this,'fang_city')">
                        <option value="0">=省=</option>
                        @foreach($cityData as $item)
                            <option value="{{ $item->id }}" @if($item->id == $fang_province) selected @endif>{{ $item->name }}</option>
                        @endforeach
                    </select>
                    <select name="fang_city" id="fang_city" style="width:100px;" onchange="selectCity(this,'fang_region')">
                        <option value="0">==市==</option>
                        @foreach($city as $item)
                            <option value="{{ $item['id'] }}" @if($item['id'] == $fang_city) selected @endif>{{ $item['name'] }}</option>
                        @endforeach
                    </select>
                    <select name="fang_region" id="fang_region" style="width:100px;" onchange="selectCity(this,'fang_town')">
                        <option value="0">==区/县==</option>
                        @foreach($region as $item)
                            <option value="{{ $item['id'] }}" @if($item['id'] == $fang_region) selected @endif>{{ $item['name'] }}</option>
                        @endforeach
                    </select>
                    <select name="fang_town" id="fang_town" style="width:100px;">
                        <option value="0">=乡/镇/社区=</option>
                        @foreach($town as $item)
                            <option value="{{ $item['id'] }}" @if($item['id'] == $fang_town) selected @endif>{{ $item['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="formControls col-xs-4 col-sm-5">
                    <input type="text" class="input-text" name="fang_addr" value="{{ $fang_addr }}" placeholder="小区详情地址和房源说明" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租金：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" style="width: 200px;" name="fang_rent" value="{{ $fang_rent }}" /> 元
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>楼层：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" style="width: 200px;" name="fang_floor" value="{{ $fang_floor }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>付款方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                   <select name="fang_rent_type" style="width:200px;">
                        @foreach($fang_rent_type_data as $item)
                            <option value="{{ $item->id }}" @if($item['id'] == $fang_rent_type) selected @endif>{{ $item->name }}</option>
                        @endforeach
                   </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几室：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_shi" value="{{ $fang_shi }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几厅：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_ting" value="{{ $fang_ting }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几卫：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_wei" value="{{ $fang_wei }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>朝向：</label>
                <div class="formControls col-xs-8 col-sm-9">
                   <select name="fang_direction" style="width:200px;">
                        @foreach($fang_direction_data as $item)
                            <option value="{{ $item->id }}" @if($item['id'] == $fang_direction) selected @endif>{{ $item->name }}</option>
                        @endforeach
                   </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租凭方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                   <select name="fang_rent_class" style="width:200px;">
                        @foreach($fang_rent_class_data as $item)
                            <option value="{{ $item->id }}" @if($item['id'] == $fang_rent_class) selected @endif>{{ $item->name }}</option>
                        @endforeach
                   </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑面积：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_build_area" style="width:60px" value="{{ $fang_build_area }}" /> 平米
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>使用面积：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_using_area" style="width:60px" value="{{ $fang_using_area }}" /> 平米
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑年代：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" onfocus="WdatePicker({dateFmt:'yyyy'})" class="input-text Wdate" name="fang_year" value="{{ $fang_year }}" style="width:120px" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>配套设施：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    @foreach($fang_config_data as $item)
                        <label>
                           <input type="checkbox" name="fang_config[]" value="{{ $item->id }}" @foreach($fang_config as $value)  @if($item['id'] == $value) checked @endif  @endforeach>
                           {{ $item->name }} &emsp;&emsp;
                        </label>
                    @endforeach
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋图片：</label>
                <div class="formControls col-xs-2 col-sm-2">
                   <div id="picker">房屋图片</div>
                </div>
                <div class="formControls col-xs-6 col-sm-7">
                   <!-- 表单提交时，上传图片地址，以#隔开 -->
                   <input type="hidden" name="fang_pic" id="pic" />
                   <!-- 显示上车点成功后的图片容器 -->
                   <div id="imgList"></div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房东：</label>
                <div class="formControls col-xs-8 col-sm-9">
                   <select name="fang_owner" style="width:200px;">
                        @foreach($ownerData as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                        @endforeach
                   </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否推荐：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <div class="radio-box">
                        <label>
                            <input type="radio" name="is_recommend" value="0" @if($is_recommend == 0) checked @endif>
                            否
                        </label>
                    </div>
                    <div class="radio-box">
                        <label>
                            <input type="radio" name="is_recommend" value="1" @if($is_recommend == 1) checked @endif>
                            是
                        </label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="fang_desn" class="form-control texrtarea" rows="5" cols="195">{{ $fang_desn }}</textarea>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋详情：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="fang_body" id="fang_body">{{ $fang_body }}</textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="修改房源" /> 
                </div>
            </div>
        </form>
    </article>
@endsection
@section('js')
    <!-- webupload上传js -->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <script type="text/javascript">
        // 下拉选择市和地区
        // obj 当前对象
        // selectName 给选中下个处理html的ID 字符串
        function selectCity(obj,selectName){
            // 得到选中的值
            let value = $(obj).val();
            // 以省份ID得到市 发起ajax请求
            $.get('{{ route('admin.fang.city') }}',{id:value}).then(jsonArr => {
                let html = '<option value="0">==请选择==</option>';
                // 循环 map
                jsonArr.map(item => {
                    var {id,name} = item;
                    html += `<option value="${id}">${name}</option>`;
                });
                $('#' + selectName).html(html);
            });
        }

        
        // 富文本编辑器
        var ue = UE.getEditor('fang_body',{
            initialFrameWidth:1200,
            initialFrameHeight:500
        });

        // 初始化 Web Uploadervar 
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收服务端 上传PHP的代码
            server: '{{ route('admin.fang.upfile') }}',
            // 文件上传时携带参数
            formData:{
                _token:'{{csrf_token()}}'
            },
            // 文件上传的表单名称
            fileVal:'file',
            // 选择文件的按钮
            pick: {
               id:'#picker',
               // 是否开启选择多个文件的能力
               multiple:true,
            },
            // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: true
        });
        // 上传成功时的回调方法
        uploader.on( 'uploadSuccess', function( file,ret ) {
           // 表单提交时，图片路径以#隔开
           let val = $('#pic').val();
           let tmp = val + '#' + ret.url;
           $('#pic').val(tmp);
           showImg(ret.url); 
        });

          // 图片显示方法
          function showImg(url){
           // 图片显示
           var imglist = $('#imgList');
           // 注：一定要用追加而不是html覆盖
           var html = `<div style="position:relative;height:260px;float:left">
                            <img src='${url}' style="height:260px;" />
                            <strong onclick="delpic(this,'${url}')" style="position:absolute;right:0;top:-17px;color:#ccc;font-size:30px">x</strong>  
                      </div>`;
            imglist.append(html);
        }

        // 修改房源列表显示图片
        // 赋值图片路径
        let picStr = "{{ $fang_pic }}";
        $('#pic').val(`#${picStr}`);
        // 显示图片
        let picArr = picStr.split('#');
        picArr.forEach((pic)=>{
            if(pic) showImg(pic);
        });
        // 删除图片
        function delpic(obj,picurl){
            let url = "{{ route('admin.fang.delfile') }}?file=" + picurl;
            // 发起请求删除
            fetch(url);
            // 删除当前点击图片显示
            $(obj).parent().remove();
            // 修改隐藏域表单
            $('#pic').val($('#pic').val().replace(`#${picurl}`,''));
        };

        // 前端表单验证
        // https://www.runoob.com/jquery/jquery-plugin-validate.html
        $("#fang-add").validate({
            // 规则
            rules: {
                fang_name: {
                    required: true
                },
                fang_province: {
                    min: 1
                },
                fang_city: {
                    min: 1
                },
                fang_region: {
                    min: 1
                },
                fang_town: {
                    min: 1
                },
                fang_addr:{
                    required:true,
                },
                fang_rent:{
                    required:true,
                },
                fang_floor:{
                    required:true,
                },
                fang_year:{
                    required:true,
                },
                fang_desn:{
                    required:true,
                }
            },
            messages:{
                fang_province:{
                    min:'省 不能为空'
                },
                fang_city:{
                    min:'市 不能为空'
                },
                fang_region:{
                    min:'区 不能为空'
                },
                fang_town: {
                    min:'镇 不能为空' 
                }
            },
            // 取消键盘事件
            onkeyup: false,
            // 验证成功后的样式
            success: "valid",
            // 验证通过后，处理的方法 form dom对象
            submitHandler: function (form) {
                // 表单提交
                form.submit();
            }
        });
    </script>
@endsection


